<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>申请人信息</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../js/mui-picker/mui.picker.css">
    <link rel="stylesheet" href="../../js/mui-picker/mui.poppicker.css">
    <link rel="stylesheet" href="../../css/mechant_ctpos.css">
</head>
<body class="mui-fullscreen">
<header class="mui-bar mui-bar-nav">
    <a id="backBtn" class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"></h1>
</header>

<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar" >
        </div>
        <div class="mui-pages">
        </div>
    </div>
</div>

<!--申请人信息-->
<div id="setting" class="mui-page" >
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--实名认证--></h1>
        <a href="#step2" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">下一步</a>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--申请人信息-->
                <div class="progress">
                    <ul>
                        <li class="num1 active"><span class="serial">1</span><span class="text">申请人信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num2"><span class="serial">2</span><span class="text">商户信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num3 "><span class="serial">3</span><span class="text">结算信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num4 "><span class="serial">4</span><span class="text">确认开通</span></li>
                    </ul>
                </div>

                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>姓名</label>
                        <input type="text" id="realname" class="mui-input-clear" placeholder="请输入姓名">
                    </div>
                    <div class="mui-input-row">
                        <label>身份证号</label>
                        <input type="text" id="idCard" class="mui-input-clear" placeholder="请输入身份证号">
                    </div>
                    <div class="mui-input-row">
                        <label>手机号码</label>
                        <input type="number" id="phone" class="mui-input-clear"
                               placeholder="请输入手机号码">
                    </div>
                    <div class="mui-input-row">
                        <label>验证码</label>
                        <input type="number" id="code" class="mui-input-clear"
                               placeholder="请输入验证码">
                        <span id="send">发送验证码</span>
                    </div>
                </form>
                <div class="upload-tit upload-tit--top">
                    身份证正面/反面照片
                </div>
                <div class="mui-row pics">
                    <div class="mui-col-xs-6 ">
                        <div class="imagebox">
                            <div class="image">
                                <img src="../../images/vs1.jpg" alt="身份证正面">
                                <input class="file" type="file">
                            </div>
                            <div class="imagename">身份证正面</div>
                        </div>
                    </div>
                    <div class="mui-col-xs-6 ">
                        <div class="imagebox">
                            <div class="image">
                                <img src="../../images/vs2.jpg" alt="身份证反面">
                                <input class="file" type="file">
                            </div>
                            <div class="imagename">身份证反面</div>
                        </div>
                    </div>
                </div>
                <div class="upload-tit">
                    手持身份证正面照片
                </div>
                <div class="mui-row pics">
                    <div class="mui-col-xs-6 ">
                        <div class="imagebox">
                            <div class="image">
                                <img src="../../images/vs5.jpg" alt="手持身份证正面照片">
                                <input class="file" type="file">
                            </div>
                            <div class="imagename">点击上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--商户信息-->
<div id="step2" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--请选择银行--></h1>
        <a href="#step3" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">下一步</a>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-content">
                    <!--商户信息-->
                    <div class="progress">
                        <ul>
                            <li class="num1 active"><span class="serial">1</span><span class="text">申请人信息</span></li>
                            <li class="xline"><span class="line"></span></li>
                            <li class="num2 active"><span class="serial">2</span><span class="text">商户信息</span></li>
                            <li class="xline"><span class="line"></span></li>
                            <li class="num3 "><span class="serial">3</span><span class="text">结算信息</span></li>
                            <li class="xline"><span class="line"></span></li>
                            <li class="num4 "><span class="serial">4</span><span class="text">确认开通</span></li>
                        </ul>
                    </div>
                    <form class="mui-input-group">
                        <div class="mui-input-row">
                            <label>商户名称</label>
                            <input type="text" placeholder="商铺名称,如:李记粤菜馆">
                            <a href="#info" id="pts" >
                                <span class="fa fa-question-circle-o"></span>
                            </a>
                        </div>
                        <div class="mui-input-row " id="showCityPicker3">
                            <div class="mui-navigate-right">
                                <label>装机地址</label>
                                <input type="text" id="cityResult3" class="mui-input-clear" placeholder="请选择所在区域">
                            </div>
                        </div>
                    </form>
                    <div class="mui-input-row" style="margin: 8px 5px 2px; ">
                        <textarea style="margin-bottom:0;" id="textarea" rows="3" placeholder="详细地址"></textarea>
                    </div>
                    <div class="upload-tit">
                        营业执照照片(选填)
                    </div>
                    <div class="mui-row pics">
                        <div class="mui-col-xs-6 ">
                            <div class="imagebox">
                                <div class="image">
                                    <img src="../../images/vs6.jpg" alt="营业执照照片">
                                    <input class="file" type="file">
                                </div>
                                <div class="imagename">点击上传</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--结算信息-->
<div id="step3" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"></h1>
        <a href="#step4" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">下一步</a>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--结算信息-->
                <div class="progress">
                    <ul>
                        <li class="num1 active"><span class="serial">1</span><span class="text">申请人信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num2 active"><span class="serial">2</span><span class="text">商户信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num3 active"><span class="serial">3</span><span class="text">结算信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num4 "><span class="serial">4</span><span class="text">确认开通</span></li>
                    </ul>
                </div>
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>开户名</label>
                        <input type="text" id="kfname" class="mui-input-clear" placeholder="请输入开户名">
                    </div>
                    <div class="mui-input-row">
                        <label>银行卡号</label>
                        <input type="text" id="bankno" class="mui-input-clear" placeholder="请输入银行卡号">
                    </div>
                    <div class="mui-input-row">
                        <label>开户网点</label>
                        <input type="number" id="address" class="mui-input-clear"
                               placeholder="请输入开户网点">
                    </div>
                </form>
                <div class="upload-tit upload-tit--top">
                    银行卡正面/反面照片
                </div>
                <div class="mui-row pics">
                    <div class="mui-col-xs-6 ">
                        <div class="imagebox">
                            <div class="image">
                                <img src="../../images/vs3.jpg" alt="银行卡正面">
                                <input class="file" type="file">
                            </div>
                            <div class="imagename">银行卡正面</div>
                        </div>
                    </div>
                    <div class="mui-col-xs-6 ">
                        <div class="imagebox">
                            <div class="image">
                                <img src="../../images/vs4.jpg" alt="银行卡反面">
                                <input class="file" type="file">
                            </div>
                            <div class="imagename">银行卡反面</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--确认开通-->
<div id="step4" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"></h1>
        <button id="submit"  class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">下一步</button>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--确认开通-->
                <div class="progress">
                    <ul>
                        <li class="num1 active"><span class="serial">1</span><span class="text">申请人信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num2 active"><span class="serial">2</span><span class="text">商户信息</span></li>
                        <li class="xline"><span class="line"></span></li>
                        <li class="num3 active"><span class="serial">3</span><span class="text">结算信息</span></li>
                        <li class="xline "><span class="line"></span></li>
                        <li class="num4 active"><span class="serial">4</span><span class="text">确认开通</span></li>
                    </ul>
                </div>
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>机器序列号</label>
                        <input type="number" id="sno" class="mui-input-clear"
                               placeholder="请扫描输入序列号">
                        <img id="scan" src="../../images/scan.png" width="30px" alt="">
                    </div>
                </form>

                <div class="upload-tit">
                    机器编码照片
                </div>
                <div class="mui-row pics">
                    <div class="mui-col-xs-6 ">
                        <div class="imagebox">
                            <div class="image">
                                <img src="../../images/vs7.jpg" alt="机器编码照片">
                                <input class="file" type="file">
                            </div>
                            <div class="imagename">点击上传</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--info-->
<div id="info" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <!--<h1 class="mui-center mui-title"></h1>-->
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                商户名称规范
                商户名称规范
                商户名称规范
                商户名称规范
                商户名称规范
            </div>
        </div>
    </div>
</div>

<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/mui-view/mui.view.js"></script>
<script src="../../js/mui-picker/mui.picker.js"></script>
<script src="../../js/mui-picker/mui.poppicker.js"></script>
<script src="../../js/mui-picker/city.data-3.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/mechant/mechant_ctpos.js"></script>
<script>
    (function($, doc) {
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //-----------------------------------------
            //级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var cityResult3 = doc.getElementById('cityResult3');
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker3.show(function(items) {
                    // cityResult3.innerText = "你选择的城市是:" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    cityResult3.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);
</script>
</body>
</html>